<template>
  <div class="income-item">
    <div class="removeItem" @click="removeItem">x</div>
    <div class="desc">{{ income.desc }}</div>
    <div class="price">${{ income.value }}</div>
    <div class="date">{{ formDate }}</div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, computed } from 'vue'

const props = defineProps({
  income: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const emit = defineEmits(['remove-item'])
const formDate = computed(() => {
  const date = new Date(props.income.date)
  const year = date.getFullYear()
  const month = date.getMonth()
  const day = date.getDate()
  return year + '/' + month + '/' + day
})

const removeItem = () => {
  emit('remove-item')
}
</script>

<style lang="scss" scoped>
.income-item {
  position: relative;
  display: flex;
  padding: 15px 15px 15px 0;
  background-color: #fff;
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto 30px;
}

.removeItem {
  color: #ef2d2d;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  margin: 0 15px;
}

.desc {
  color: #666;
  flex: 1 1 100%;
  font-size: 20px;
}

.price {
  color: #666;
  min-width: 100px;
  font-size: 20px;
}

.date {
  color: #666;
  text-align: right;
  font-size: 20px;
}
</style>
